<template>
  <div class="container">
    <el-tabs
      v-model="params.lang"
      class="tab-card tabs-white"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane
        v-for="item in langList"
        :key="item.id"
        :label="item.lang"
        :name="item.lang"
      />
    </el-tabs>
    <div class="content">
      <TableSearch>
        <template>
          <el-form-item :label="$t('内容标题')">
            <el-input
              v-model="params.title"
              size="small"
              :placeholder="$t('请输入内容标题')"
            />
          </el-form-item>
          <el-form-item :label="$t('站点')">
            <el-select
              v-model="params.website_id"
              size="small"
              @change="getCategoryList"
            >
              <el-option
                v-for="item in webList"
                :key="item.id"
                :label="item.domain"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="`${$t('栏目')}：`">
            <el-select
              v-model="params.category_id"
              size="small"
              filterable
              multiple
            >
              <el-option-group
                v-for="group in columnList"
                :key="group.id"
                :label="group.title"
              >
                <el-option
                  v-for="item in group.category"
                  :key="item.id"
                  :label="item.parent_id != 0 ? `${item.title}` : item.title"
                  :value="+item.id"
                  :disabled="item.disabled"
                />
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="handleSearch">
              {{ $t('搜索') }}
            </el-button>
            <el-button size="small" @click="handleReset">
              {{ $t('重置') }}
            </el-button>
          </el-form-item>
        </template>
        <template #btn>
          <el-button type="primary" @click="handleExamine(checkedList)">
            {{ $t('批量通过') }}
          </el-button>
          <el-button type="primary" @click="handleReject(checkedList)">
            {{ $t('批量驳回') }}
          </el-button>
        </template>
      </TableSearch>
      <BaseTable
        ref="baseTable"
        :request="request"
        :params.sync="params"
        :is-request="false"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column :label="$t('文章标题')" prop="title" />
        <el-table-column :label="$t('栏目')">
          <template slot-scope="scope">
            {{ renderTitle(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('创建时间')" prop="create_time" />
        <el-table-column :label="$t('创建人')" prop="author" />
        <el-table-column :label="$t('操作')" width="160" align="right">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="$t('审核')"
              placement="top"
            >
              <el-button
                type="text"
                icon="el-icon-s-check"
                @click="handleTarget(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </BaseTable>
    </div>
    <BaseDialog
      width="650px"
      :title="$t('审核')"
      :dialog-show.sync="dialogShow"
      footer
      @submit="handleSubmitReject"
      @cancel="handleClose"
    >
      <el-form label-position="top">
        <el-form-item :label="`${$t('拒绝原因')}:`">
          <el-input
            v-model="rejectForm.reason"
            type="textarea"
            :rows="5"
            :placeholder="$t('请输入拒绝原因')"
          />
        </el-form-item>
        <el-form-item :label="`${$t('拒绝附件')}:`">
          <BaseUpload v-model="rejectForm.file" description=" " />
        </el-form-item>
      </el-form>
    </BaseDialog>
  </div>
</template>

<script>
import columnApi from '@/api/column.js'
import websetApi from '@/api/websetting'
import contentApi from '@/api/module'
import webApi from '@/api/website'
export default {
  data() {
    return {
      request: columnApi.getCheckList,
      params: {
        lang: ''
      },
      rejectForm: {},
      examineInfo: [],
      dialogShow: false,
      langList: [],
      webList: [],
      columnList: [],
      checkedList: []
    }
  },
  computed: {
    siteId() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    '$store.getters.siteId': {
      handler(val) {
        if (val) {
          this.params.website_id = val
          this.getLang()
          this.getWebList()
        }
      },
      immediate: true
    }
  },
  methods: {
    handleTarget(row) {
      this.$router.push({
        name: 'updateContent',
        query: {
          id: row.id,
          lang: row.lang,
          module_id: row.module_id,
          website_id: this.params.website_id,
          type: 'examine'
        }
      })
    },
    renderTitle(row) {
      return row.category.map(item => item.title).join('、')
    },
    handleSelectionChange(e) {
      this.checkedList = e
    },
    handleSearch() {
      this.getCheckList('search')
    },
    handleReset() {
      this.params.title = ''
      this.params.category_id = []
      this.params.website_id = this.siteId
      this.getCheckList('search')
    },
    getLang() {
      websetApi.langInfo({ site_id: this.siteId }).then(res => {
        this.langList = res.data
        if (res.data.length > 0) {
          this.params.lang = res.data[0].lang
        }
        this.getCategoryList()
        this.getCheckList('search')
      })
    },
    // 获取栏目列表
    async getCategoryList() {
      const res = await contentApi.getModuleCate({
        site_id: [this.siteId],
        lang: this.params.lang,
        ...this.params
      })
      this.columnList = res.data
    },
    async getWebList() {
      const res = await webApi.websiteList()
      this.getTreeData(res.data)
    },
    // 递归获取到站点的数据
    getTreeData(data) {
      const webListArray = []
      function transformWebList(data) {
        if (data.length) {
          data.forEach(item => {
            webListArray.push({
              id: item.id,
              domain: item.parent_id != 0 ? `--${item.domain}` : item.domain,
              parent_id: item.parent_id
            })
            if (item.children.length) {
              transformWebList(item.children)
            }
          })
        }
      }
      transformWebList(data)
      this.webList = webListArray
    },
    // tab切换
    handleClick(val) {
      this.params.lang = val.name
      this.getCategoryList()
      this.getCheckList('search')
    },
    async getCheckList(type) {
      this.$refs.baseTable.getList(type)
    },
    // 审批数据
    async checkData(data) {
      const result = await columnApi.checkContent(data)
      if (result.code == 0) {
        this.$message.success(result.msg)
        this.rejectForm = {}
        this.rejectForm.file = []
        this.getCheckList()
        this.dialogShow = false
      }
    },
    async handleExamine(data) {
      if (!data.length) {
        this.$message.error(this.$t('请先选择数据'))
        return
      }
      const check_data = data.map(item => ({
        version: item.version,
        id: item.id
      }))
      const res = await this.$confirm(
        this.$t('此操作将通过审核'),
        this.$t('提示'),
        {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消')
        }
      ).catch(err => console.log(err))
      if (res) {
        this.checkData({
          status: 3,
          check_data
        })
      }
    },
    handleReject(data) {
      if (!data.length) {
        this.$message.error(this.$t('请先选择数据'))
        return
      }
      this.dialogShow = true
      this.examineInfo = data
    },
    handleClose() {
      this.rejectForm = {}
      this.rejectForm.file = []
    },
    handleSubmitReject() {
      if (!this.rejectForm.file?.length || !this.rejectForm.reason) {
        this.$message.error(this.$t('请填写驳回信息'))
        return
      }
      const res = {
        status: 4,
        reason: this.rejectForm.reason,
        files: this.rejectForm.file.map(item => item.id),
        check_data: this.examineInfo.map(item => ({
          version: item.version,
          id: item.id
        }))
      }
      this.checkData(res)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .tab-card.el-tabs--card .el-tabs__content {
    padding: 0 16px;
  }
}
.content {
  background-color: #fff;
  padding: 0px 16px;
}
</style>
